<template>
  <div id='home'>
    <div class="info-content clearfix">

      <div class="profile-info">
        <div class="avatar">
          <d-avatar :width="116" :img-url="basicInfo.headImg" :name="basicInfo.nick"></d-avatar>
        </div>
        <div class="employee-name">{{basicInfo.nick || ''}}</div>
        <div class="employee-info">
          <div class="employee-info-item">
            <label class="label">Job Title：</label>
            <label class="value">{{basicInfo.jobTitle || ''}}</label>
          </div>
          <div class="employee-info-item">
            <label class="label">Org：</label>
            <label class="value">{{basicInfo.org || ''}}</label>
          </div>
          <div class="employee-info-item">
            <label class="label">Work  Location：</label>
            <label class="value">{{basicInfo.workAddress || ''}}</label>
          </div>
        </div>
        <div class="location">
          <i class="iconfont location-icon">&#xe666;</i>
          San Francisco, California
        </div>
      </div>

      <div class="right-content employee-status" v-if="userType == 4">
        <div class="title">
          <span class="title-name">Who’s working</span>
          <span class="r">
            <span class="number">{{employeeStatusList.length}}</span>
            Employees
          </span>
        </div>
        <ul class="employee-list" @mouseenter = "employeeMouseEnter" @mouseleave="employeeMouseLeave">
          <li v-for="(item,key) in employeeStatusList"  :key="key" class="employee-list-item">
            <Row>
              <i-col span="6">
                <d-avatar :status="item.status" style="margin-right: 12px" :img-url="item.imgUrl" :width="36" :name="item.name"></d-avatar>
                {{item.name}}
              </i-col>
              <i-col class="text-center" span="12">{{item.timeIn}}</i-col>
              <i-col span="6">{{item.dayTotal}}</i-col>
            </Row>
          </li>
        </ul>
      </div>

      <div class="right-content user-schedule" v-if="userType == 5">
        <div class="header-content">
          <Row class="date-select">
            <i-col class="item" span="6" @click.native="changeDay('left')"><i class="iconfont">&#xe617;</i></i-col>
            <i-col class="item" span="6" @click.native="changeToToday">Today</i-col>
            <i-col class="item" span="6">
              <Date-picker
                :open="dateOpen"
                type="date"
                v-model="selectDay"
                @on-change="dateChange">
                <i @click="dateOpen = true" class="iconfont">&#xe66a;</i>
              </Date-picker>
            </i-col>
            <i-col class="item" span="6" @click.native="changeDay('right')"><i class="iconfont">&#xe618;</i></i-col>
          </Row>
        </div>
        <div class="main-content clearfix">
          <div class="schedule-calendar">
            <div class="calendar-title">January 2017</div>
            <table class="calendar-content">
              <tr class="header-row">
                <th class="calendar-cell" v-for="(item,key) in weeks">
                  {{item}}
                </th>
              </tr>
              <tr class="content-row" v-if="calendarRow" v-for="(cells,key) in calendarRow" :key="key">
                <td @click="selectDay = cell.year + '-' + cell.month + '-' +  cell.day" class="calendar-cell" :class="[cell.className]"   v-for="(cell,key) in cells">
                 <span class="calendar-cell-text">{{cell.text}}</span>
                </td>
              </tr>
            </table>
          </div>
          <div class="schedule-info">
            <div class="current-date">{{selectDay}}</div>
            <div  v-if="monthSchedule&&monthSchedule[selectDay]" class="schedule-item"  v-for="(item,key) in monthSchedule[selectDay]">
               <span class="color-item" :style="{backgroundColor: item.color}"></span>{{item.startTimeView.split(" ")[1]}} - {{item.endTimeView.split(" ")[1]}} Normal Shift
            </div>
          </div>
        </div>
      </div>

    </div>

    <div v-if="userType == 4" class="quick-menu-content">
      <router-link tag="div"  to="/views/time/manage/whoIsWorking" class="quick-menu-item">
        <img class="item-icon" :src="workingIcon">
        <span class="item-text">Who is working </span>
      </router-link>
      <router-link tag="div" to="/views/time/manage/schedule"  class="quick-menu-item">
        <img class="item-icon" :src="scheduleIcon">
        <span class="item-text">Schedule </span>
      </router-link>
     <!-- <router-link tag="div" to="/views/time/track/timeCard"  class="quick-menu-item">
        <img class="item-icon" :src="approvalIcon">
        <span class="item-text">Approval</span>
      </router-link>-->
      <router-link tag="div" to="/views/time/track/manualTimeCard"  class="quick-menu-item">
        <img class="item-icon" :src="manualIcon">
        <span class="item-text">Manual time card</span>
      </router-link>
      <router-link tag="div" to="/views/time/manage/timesheet"  class="quick-menu-item">
        <img class="item-icon" :src="timesheetIcon">
        <span class="item-text">Timesheets </span>
      </router-link>
      <div class="quick-menu-item disabled">
        <img class="item-icon" :src="soonIcon">
        <span class="item-text">Coming soon</span>
      </div>
    </div>

    <div  v-if="userType == 5" class="quick-menu-content">
      <router-link tag="div" to="/views/time/track/timeCard"  class="quick-menu-item">
        <img class="item-icon" :src="timeCardIcon">
        <span class="item-text">Time card</span>
      </router-link>
      <router-link tag="div" to="/views/time/manage/timesheet" class="quick-menu-item">
        <img class="item-icon" :src="timesheetIcon">
        <span class="item-text">Timesheets </span>
      </router-link>
      <router-link tag="div" to="/views/time/track/PTO" class="quick-menu-item">
        <img class="item-icon" :src="ptoIcon">
        <span class="item-text">Paid Time Off</span>
      </router-link>
    </div>
  </div>
</template>

<script>
  import scheduleIcon from '../../assets/images/schedule.png';
  import soonIcon from '../../assets/images/soon.png';
  import approvalIcon from '../../assets/images/approval.png';
  import ptoIcon from '../../assets/images/pto.png';
  import timeCardIcon from '../../assets/images/timeCard.png';
  import timesheetIcon from '../../assets/images/timesheet.png';
  import workingIcon from '../../assets/images/working_status.png';
  import manualIcon from '../../assets/images/manual.png';

  import dAvatar from 'src/components/common/avatar-componet.vue'
  export default {
    name: 'home',
    components: {dAvatar},
    created(){
      this.init();
    },
    watch:{
      selectDay(value){
        this.startDate = moment(value).startOf('month').format('YYYY-MM-DD');
        this.endDate = moment(value).endOf('month').format('YYYY-MM-DD');
        this.changeStartEnd();
      },
      startEnd(){
        this.initCalendar();
        this.getMonthSchedule();
      },
      basicInfo(value){
        if(value){
           this.userType = value.userType;
        }
      },
      userType(value){
        if(value == 5){
          this.selectDay = moment().format('YYYY-MM-DD');
        }else if(value == 4){
          this.getEmployeeStatus();
        }
      }
    },
    computed:{
      monthSchedule(){
        return this.$store.getters.monthSchedule;
      },
      employeeStatusList(){
        return this.$store.getters.employeeStatusList;
      },
      basicInfo(){
        return this.$store.getters.basicInfo;
      }
    },
    data () {
      return {
        weeks:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        scheduleIcon,
        soonIcon,
        approvalIcon,
        manualIcon,
        ptoIcon,
        timeCardIcon,
        timesheetIcon,
        workingIcon,
        title: '',
        mouseWheelTime:0,
        userType:null,
        selectDay:null,
        startDate:null,
        endDate:null,
        startEnd:null,
        calendarRow:null,
        dateOpen:false,
      }
    },
    methods:{
      init(){
        this.getBasicInfo();
      },
      changeStartEnd(){
        this.startEnd = this.startDate +  this.endDate;
      },
      getBasicInfo(){
        this.$store.dispatch('getBasicInfo');
      },
      getMonthSchedule(){
        var startDate = moment(this.selectDay).startOf('month').format('YYYY-MM-DD');
        var endDate = moment(this.selectDay).endOf('month').format('YYYY-MM-DD');
        this.$store.dispatch('getMonthSchedule',{startDate:startDate,endDate:endDate});
      },
      getEmployeeStatus(){
        this.$store.dispatch('getEmployeeStatusList')
      },
      initCalendar(){
        var t = this;
        var year = new Date(this.selectDay).getFullYear();
        var month = new Date(this.selectDay).getMonth() + 1;
        t.currentShow = moment(t.selectDay).startOf('month').format('MMM DD - ') + moment(t.selectDay).endOf('month').format('MMM DD / YYYY');
        const ROW = 6;
        const COLUMN = 7;
        var day = new Date(year,month - 1).getDay();
        var currentCells = [],
          currentLength = new Date(year,month,0).getDate();

        for(var i = 1 ;i <= currentLength;i++ ){
          let classNames = [];
          year == new Date().getFullYear() && month == new Date().getMonth() + 1 && new Date().getDate() == i &&  classNames.push('cur-date');
          currentCells.push({text:i,year:year,month:month<10?'0'+month:month,day:i<10?'0'+i:i,className:classNames.join(" ")});
        }

        //之前cells
        var preYear = month - 1 == 0 ? year - 1 : year;
        var prevMonth = month - 1 == 0 ? 12 : month - 1;
        var preLastDay = new Date(preYear,prevMonth,0).getDate();

        var preLength = day;
        var preCells = [];
        for(var i = 0 ;i < preLength;i++ ){
          let classNames = ['pre'];
          preCells.push({text:preLastDay - i,year:preYear,month:prevMonth<10?'0'+prevMonth:prevMonth,day:i<10?'0'+i:i,className:classNames.join(" ")});
        }
        preCells.reverse();

        //之后cells
        var nextYear = month + 1 == 13 ? year + 1 : year;
        var nextMonth = month + 1 == 13 ? 1 : month + 1;
        var nextFirstDay = 1;
        var nextCells = [],nextLength = ROW*COLUMN - preLength - currentLength;
        for(var i = 0 ;i < nextLength;i++ ){
          let classNames = ['next'];
          nextCells.push({text:nextFirstDay + i,year:nextYear,month:nextMonth<10?'0'+nextMonth:nextMonth,day:i<10?'0'+i:i,className:classNames.join(" ")});
        }

        var cells = preCells.concat(currentCells,nextCells),
          rows = [];
        for(var i=0;i<ROW;i++){
          rows[i] = cells.slice(COLUMN*i,COLUMN*(i+1));
        }
        this.calendarRow =  rows;
      },
      employeeMouseEnter(e){
        var t = this;
        var listEle = e.target;
        $(listEle).off('mousewheel').on('mousewheel', function(e) {
          t.mouseWheelTime = e.timeStamp;
          this.style.overflow = 'auto';
          var timer = setTimeout(function () {
            if(t.mouseWheelTime == e.timeStamp){
              listEle.style.overflow = 'hidden'
              clearTimeout(timer);
            }
          },800);
        });
      },
      employeeMouseLeave(e){
        e.target.style.overflow = 'hidden'
        $(e.target).off('mousewheel');
      },
      dateChange(value){
        this.selectDay = value;
        this.dateOpen = false
      },
      changeDay(leftOrRight){
        this.selectDay = moment(this.selectDay)[leftOrRight=='right'?'add':'subtract'](1,'month').format('YYYY-MM-DD');
      },
      changeToToday(){
        this.selectDay = moment().format('YYYY-MM-DD');
      },

    }
  }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
    @import "src/assets/css/variable.scss";

    #home {
      .info-content{
        margin: 60px auto 40px auto;
        .profile-info{
          float: left;
          width: 362px;
          height: 415px;
          background: #FFFFFF;
          box-shadow: 0px 2px 8px 0px rgba(184,198,239,0.80);
          border-radius: 4px;
          .avatar{
            margin: 29px auto 24px auto;
            text-align: center;
            .avatar-img{
              width: 116px;
              height: 116px;
              border-radius: 50%;
            }
          }
          .employee-name{
            font-size: 18px;
            line-height: 25px;
            text-align: center;
            margin-bottom: 32px;
          }
          .employee-info{
            text-align: center;
            height: 130px;
            border-bottom: 1px $baseBorderColor solid;
            .employee-info-item{
              line-height: 17px;
              margin-bottom: 14px;
              font-size: 12px;
              .label{
                color: #9FB3BF;
              }
              .value{
                color: #15252E;
              }
            }
          }
          .location{
            line-height: 50px;
            padding: 0 25px;
            font-size: 12px;
            color: #375874;
            .location-icon{
              color:#9FB3BF;
              margin-right: 13px;
            }
          }
        }

        .right-content{
          float: right;
          box-sizing: border-box;
          width: calc(100% - 416px);
          height: 415px;
          padding: 8px 0;
          background: #FFFFFF;
          box-shadow: 0px 2px 8px 0px rgba(184,198,239,0.80);
          border-radius: 4px;
        }
        .employee-status{
          >.title{
            height: 50px;
            line-height: 40px;
            padding: 0 21px;
            font-size: 16px;
            color: #3E5E78;
            border-bottom: 1px $baseBorderColor solid;
            .title-name{
              color: #3E5E78;
            }
            .number{
              font-size: 36px;
              color: #3E5E78;
            }
          }
          .employee-list{
            width: 100%;
            height: 345px;
            overflow: hidden;
            transition: all 1s;
            .employee-list-item{
              line-height: 50px;
              padding: 0 50px;
              border-bottom: 1px $baseBorderColor solid;
              .avatar-img{
                width: 36px;
                height: 36px;
                border-radius: 50% ;
                vertical-align: middle;
                margin-right: 12px;
              }
              .avatar-name{
                .avatar-name{
                  display: inline-block;
                  width: 36px;
                  height: 36px;
                  line-height: 36px;
                  border-radius: 50%;
                  vertical-align: middle;
                  margin-right: 12px;
                  color: #fff;
                  text-align: center;
                }
              }
            }
          }
        }
        .user-schedule{
          padding: 30px;
          .header-content{
            width: 100%;
            height: 50px;
            .date-select{
              width: 200px;
              border: 1px solid $baseBorderColor;
              border-radius: 2px;
              /*font-family: PingFangTC-Regular;*/
              font-size: 12px;
              color: #325570;
              .item{
                height:34px;
                line-height: 34px;
                text-align: center;
                border-right: 1px solid $baseBorderColor;
                cursor: pointer;
                .ivu-date-picker{
                  display: inline-block;
                }
                &:last-child{
                  border-right: none;
                }
                &:hover{
                  .iconfont{
                    opacity: .7;
                  }

                }
              }
            }
          }
          .main-content{
            width: 100%;
            height: 300px;
            .schedule-calendar{
              width: 440px;
              height: 100%;
              padding-right: 20px;
              float: left;
              border-right: 1px $baseBorderColor solid;
              .calendar-title{
                text-align: center;
                line-height: 20px;
                margin-bottom: 20px;
              }
              .calendar-content {
                width: 100%;
                .header-row{
                  height: 40px;
                  font-size: 14px;
                  color: #96ACB9;
                  .calendar-cell{
                    text-align: center;
                  }
                }
                .content-row {
                  height: 40px;
                  line-height: 40px;
                  .calendar-cell {
                    position: relative;
                    width: 40px;
                    text-align: center;
                    cursor: pointer;
                    font-size: 12px;
                    &:hover{
                      .calendar-cell-text{
                       color: $baseColor;
                      }
                    }
                    &.pre, &.next {
                      color: #96ACB9;
                    }
                    .calendar-cell-text{
                      padding: 5px;
                      border-radius: 50%;
                    }
                    &.cur-date {
                      .calendar-cell-text{
                        background-color: $baseColor;
                        color: #fff;
                        border-radius: 50%;
                      }
                    }
                  }
                }
              }
            }
            .schedule-info{
              width: calc(100% - 441px);
              height: 100%;
              float: right;
              padding-left: 50px;
              overflow: auto;
              .current-date{
                font-size: 14px;
                color: #96ACB9;
              }
              .schedule-item{
               line-height: 50px;
                .color-item{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  margin-right: 18px;
                  font-size: 12px;
                  color: #335570;
                }
              }
            }
          }
        }
      }

      .quick-menu-content{
        .quick-menu-item{
          display: inline-block;
          margin-bottom: 40px;
          margin-right: 55px;
          width: 360px;
          height: 140px;
          line-height: 140px;
          padding: 0 44px;
          vertical-align: middle;
          background: #FFFFFF;
          box-shadow: 0px 2px 8px 0px rgba(184,198,239,0.80);
          border-radius: 4px;
          &:not(.disabled):hover{
            box-shadow: 6px 10px 15px 0px rgba(184,198,239,0.80);
          }
          &:nth-child(3n+0){
            margin-right: 0;
          }
          .item-icon{
            width: 60px;
            vertical-align: middle;
            margin-right: 32px;
          }
          .item-text{
            font-size: 20px;
            color: #335570;
          }
        }

      }

    }
</style>
